今天的目標就是完成歷史紀錄，看有沒有時間再優化一下其他地方

首先要先幫chrome.storage預設資料

bg.js

class TrainManager {
    constructor() {
        ...
        ...
        //預設值為陣列
        chrome.storage.sync.get('history',value=>{
            if(!value.history){
                chrome.storage.sync.set({'history':[]})
            }
        })
    }
    ...
    ...
}

然後就是給浮動頁面串接的部分

bg.js

//in TrainManager
fetchHistoryList(){
    return new Promise((resolve,reject)=>{
        chrome.storage.sync.get('history',value=>{
            resolve(value.history)
        })
    })
}

回到浮動頁面，跟其他資料一樣是用mounted取得background物件以及promise

popup/main.js

,
mounted() {
    //更新資料
    chrome.runtime.getBackgroundPage(background => {
        this.dataService = background.trainManager
        this.dataService.fetchHistoryList().then(historys=>{
            this.historyList = historys
        })
    })
}

這樣，串接的部分就完成了，接下來就是新增歷史紀錄的功能
所以我們又回到後台腳本
建立一個儲存函數，並且儲存近五筆的歷史紀錄，並且移除之前的資料

bg.js

saveActionData(){
    chrome.storage.sync.get('history',value=>{
        //移除最舊的資料
        let historys = value.history
        if(historys.length > 4 ){
            historys.splice(0, 1)
        }
        historys.push(this.actionData)
        this.actionData = null
        chrome.storage.sync.set({'history':historys})
    })
}

並且在我們前幾天做的監控事件中，先回傳資料給內容腳本用，同時再儲存到chrome.stroage

msgListener(request, sender, sendResponse){
    switch(request.func){
        case 'getSearch': 
            sendResponse(trainManager.actionData)
            trainManager.saveActionData()
            break
    }   
}

於是我們就大功告成拉！所以近五筆資料都會被儲存在chrome.storage裡，
並且在介面上點擊就可以直接使用，超方便的！

明天，我們就來嘗試上架看看吧！